﻿@page "/components/select"


<DocsPage>
    <DocsPageHeader Title="Select" SubTitle="Select fields allow users to provide information from a list of options." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Variants">
                <Description>Select comes in the variants Text, Filled and Outline.<br />Select is generic, meaning you can use values of any type with it. See the example code how that works.</Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="SelectVariantsExample">
                <SelectVariantsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Props">
                <Description>Select behaves and looks allot like a regular textfield and takes all of the textfields different form props.</Description>
            </SectionHeader>
            <SectionContent Code="SelectPropsExample" ShowCode="false">
                <SelectPropsExample />
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Margin">
                        <Description>With the <CodeInline>Margin</CodeInline> prop you can reduce the height of the component.</Description>
                    </SectionHeader>
                    <SectionContent Code="SelectMarginExample" ShowCode="false">
                        <SelectMarginExample />
                    </SectionContent>
                </DocsPageSection>
                <DocsPageSection>
                    <SectionHeader Title="Dense">
                        <Description>The <CodeInline>Dense</CodeInline> prop set to true the select list will be displayed with dense vertical padding.</Description>
                    </SectionHeader>
                    <SectionContent Code="SelectDenseExample" ShowCode="false">
                        <SelectDenseExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Using Select">
                <Description></Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="SelectUsageExample">
                <SelectUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Multiselect">
                <Description>
                    If you set <CodeInline>MultiSelection="true"</CodeInline>, you can select multiple values. The selected options are returned as concatenated comma-delimited
                    string via <CodeInline>Value</CodeInline> and as a <CodeInline>HashSet&lt;string></CodeInline> via <CodeInline>SelectedValues</CodeInline>. The delimited string
                    can be modified with the <CodeInline>Delimiter</CodeInline> parameter.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="MultiSelectExample">
                <MultiSelectExample />
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Customized Selection Text">
                        <Description>
                            If you set <CodeInline>MultiSelection="true"</CodeInline>, you can select multiple values.
                            By defining the <CodeInline>MultiSelectionTextFunc</CodeInline> method, the returned selection can be fully customized.
                        </Description>
                    </SectionHeader>
                    <SectionContent ShowCode="false" Code="MultiSelectCustomizedExample">
                        <MultiSelectCustomizedExample />
                    </SectionContent>
                </DocsPageSection>
                <DocsPageSection>
                    <SectionHeader Title="Select All">
                        <Description>
                            If you set <CodeInline>SelectAll="true"</CodeInline>, you can display a 'Select all' option to select or deselect all items.
                            It is added at the top of the list of items. The text for this option can be customized by the <CodeInline>SelectAllText</CodeInline> parameter.
                        </Description>
                    </SectionHeader>
                    <SectionContent ShowCode="false" Code="MultiSelectSelectAllExample">
                        <MultiSelectSelectAllExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Value presentation">
                <Description>
                    Select uses the render fragments you specify for the items to display the selected value (if any). If you don't specify render fragments, the value will be displayed as text. Also, if you have render fragments
                    but the value that has been set is not in the list, it will also be displayed as text.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="SelectPresentationExample">
                <SelectPresentationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom converter">
                <Description>
                    Select has a built-in <CodeInline>DefaultConverter</CodeInline> which converts the values from any primitive type to string for presentation of the selected value.
                    You can customize that converter as described under <MudLink Href="/features/converters">Converters</MudLink>. Here, we use <CodeInline>ToStringFunc</CodeInline> to
                    convert objects of type Pizza to their string representation. Note how the <CodeInline Tag="true">MudSelectItem</CodeInline> uses that string representation if you don't
                    specify a render fragment.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="SelectCustomConverterExample">
                <SelectCustomConverterExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Numeric collection">
                <Description>
                    When using the properties <CodeInline>Required=true</CodeInline> and <CodeInline>Clearable=true</CodeInline> in combination with a numeric collection,
                    it is required that the items of the collection are of a nullable numeric type such as <CodeInline>int?</CodeInline> or <CodeInline>double?</CodeInline> in order
                    for the <CodeInline>Required</CodeInline> property to behave as expected.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="SelectNumericCollectionExample">
                <SelectNumericCollectionExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Placement">
                <Description>
                    The component uses <MudLink Href="/components/popover">MudPopover</MudLink> to place it's list of items. It can be controlled with <CodeInline>AnchorOrigin</CodeInline> and <CodeInline>TransformOrigin</CodeInline>
                    To change where the popover should start from you only need to change the <CodeInline>AnchorOrigin</CodeInline>. <MudLink Color="Color.Secondary" Href="/components/popover">Read more on popover's page.</MudLink>
                </Description>
            </SectionHeader>
            <SectionContent Code="SelectAdvancedPopoverExample" ShowCode="false">
                <SelectAdvancedPopoverExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Keyboard Navigation">
                <Description>
                    <MudText>MudSelect accepts keys to keyboard navigation.</MudText>
                    <br />
                    <MudText><CodeInline>Space</CodeInline> key to toggle dropdown open/close</MudText>
                    <MudText><CodeInline>Escape</CodeInline> or <CodeInline>Alt+ArrowUp</CodeInline> keys to close dropdown</MudText>
                    <MudText><CodeInline>Enter</CodeInline> or <CodeInline>NumpadEnter</CodeInline> or <CodeInline>Alt+ArrowDown</CodeInline> keys to open dropdown</MudText>
                    <MudText><CodeInline>ArrowUp</CodeInline> key to select/navigate previous item</MudText>
                    <MudText><CodeInline>ArrowDown</CodeInline> key to select/navigate next item</MudText>
                    <MudText><CodeInline>Home</CodeInline> key to select/navigate first item</MudText>
                    <MudText><CodeInline>End</CodeInline> key to select/navigate last item</MudText>
                    <MudText><CodeInline>Enter</CodeInline> or <CodeInline>NumpadEnter</CodeInline> keys to select item (MultiSelect only)</MudText>
                    <MudText><CodeInline>Ctrl+A</CodeInline> key to toggle select all/clear all items (MultiSelect only)</MudText>
                    <MudText><CodeInline>Printable Characters</CodeInline> to set the first item in the list whose text starts with that character. Press again to select the next item with the same status.</MudText>
                    <br />
                    <MudText>*Disabled items cannot be selected by keys.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="SelectKeyboardNavigationExample">
                <SelectKeyboardNavigationExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>

